<!-- 出货车单管理 -->
<template>
<div class="content-box">
  <div style="display: flex;">
    <FilterBox
      style="flex: 1;"
      :labelWidth="120"
      :filterItemList="filterItemList"
      :filterData="filterData"
      @search="search"
      @clear="clear"
      @keep="keepHeaderList"
    >
    </FilterBox>
    <div style="min-height: 38px;margin-bottom: 15px;line-height:38px;background-color: #EBEEF3;padding:3px 10px;">
      <el-popover popper-class="headerCity" placement="bottom" trigger="click" ref="popoverRefCity" @hide="CityHide">
        <div>
          <el-input
            style="margin-bottom:4px;"
            @input="filterCityInput"
            v-model="filterCity"
          ></el-input>
        </div>
        <ul style="margin: 0;height:300px;overflow:auto;">
          <li
            :style="{backgroundColor:current_city_id == item.id? '#fff065': '#fff',}"
            class="city_btn_style"
            v-for="item in CityList"
            :key="item.id"
            @click="selectCity(item)"
          >
            {{ item.name_current }}
          </li>
        </ul>
        <span style="color: #6c9ee5 ; cursor: pointer" slot="reference"
          >[{{ current_city_name }}]</span
        >
      </el-popover>
    </div>
  </div>
  <div class="tabsBox">
    <div @click="leftSlide" class="left-btn border-right">
        <i class="el-icon-d-arrow-left"></i>
    </div>
    <div class="scroll_wrapper" ref="wrapperCon">
      <div class="tabslist">
        <div
          :class="filterData.trans_status === item.id ? 'tabsItem tabs-active' : 'tabsItem'"
          style="padding-right:5px"
          v-for="(item, index) in tabsList"
          :key="index"
          @click="changeTab(item)"
        >
          {{ item.name }}
          <span v-if="item.id!==''&&item.id!==6">（{{item.count}}）</span>
        </div>
      </div>
    </div>
    <div @click="rightSlide" class="right-btn border-left">
        <i class="el-icon-d-arrow-right"></i>
    </div>
  </div>
  <MyTable
    :tableColumn="tableColumn"
    :tableData="tableData"
    :isOrder="false"
    @sendCurrentData="setCurrent"
    @cellDblclick="cellDblclick"
    >
    <template v-slot:content="scope">
      <span class="moreContant" v-if="!!scope.config.MoreContant">
        <span v-for="(item,k) in scope.config.MoreContant" :key="k">
          <span v-if="!item.istooltip">{{item.label}}:{{scope.row[item.prop]}}</span>
          <span v-else>
            {{item.label}}:
            <el-tooltip class="tooltip" :content="scope.row[item.prop]" placement="bottom-start" effect="dark">
                <span>{{scope.row[item.prop]}}</span>
            </el-tooltip>
            </span>
        </span>
      </span>
      <span class="moreContant" v-else-if="!!scope.config.is_additional">
        <span v-for="(item,k) in scope.row.items" :key="k">
          {{item.name_current}}:{{item.val}}
        </span>
      </span>
      <span v-else>{{ scope.row[scope.config.prop] }}</span>
    </template>
  </MyTable>
  <!-- 分页组件 -->

  <Pagination
    :menuTabsId="filterData.trans_status"
    ref="pagination"
    :currentPage="pageinfo.page"
    :pageSize="pageinfo.limit"
    :total="pageinfo.number_all"
    :page_all="pageinfo.page_all"
    @pagination="SetPagination"
    @sendPushButton="pushButton"
  >
  </Pagination>

  <Add
    @success="getTableData"
    ref="add"
  ></Add>
</div>
</template>
<script>
import Add from "./ShipmentOrderManagement_add";

export default {
  components: {
    Add,
  },
  data(){
    return{
      tabsList:[
        {id:0,name:this.$t('ShipmentOrderManagementLang.tab1'),count:0},
        {id:2,name:this.$t('ShipmentOrderManagementLang.tab2'),count:0},
        {id:3,name:this.$t('ShipmentOrderManagementLang.tab3'),count:0},
        {id:'',name:this.$t('ExpressDeliveryManagementLang.whole'),count:0},
      ],
      filterItemList:[
          // 日期选择器
        { label:this.$t('ShipmentOrderManagementLang.date'),width:200, filterKey: 'order_date', filterType: 'SearchDate' },
        // input输入框
        { label:this.$t('ShipmentOrderManagementLang.wagon_number'),width:200, filterKey: 'order_sn', filterType: 'SearchInput', placeholderStr: null },
      ],
      filterData:{
        page: "",
        limit: "30",
        order: "",
        
        order_date:[],
        order_date1: "",
        order_date2: "",
        order_sn: "",
      },

      tableColumn: [
        {
          label: "",
          prop: "table_code",
          width:40,
        },
        {
          checked: true,
          label: this.$t('ShipmentOrderManagementLang.date'),
          prop: "date_value",
          width: 100,
        },
        {
          checked: true,
          label: this.$t('ShipmentOrderManagementLang.wagon_number'),
          prop: "wagon_number_value",
          width: 100,
        },
        {
          checked: true,
          label: this.$t('ShipmentOrderManagementLang.quantity'),
          prop: "quantity_value",
          width: 100,
        },
        {
          checked: true,
          label: this.$t('ShipmentOrderManagementLang.volume'),
          prop: "volume_value",
          width: 100,
        },
        {
          checked: true,
          label: this.$t('ShipmentOrderManagementLang.drivers_phone_number'),
          prop: "drivers_phone_number_value",
          width: 100,
        },
        {
          checked: true,
          label: this.$t('ShipmentOrderManagementLang.loading_fee'),
          prop: "loading_fee_value",
          width: 100,
        },
        {
          checked: true,
          label: this.$t('ShipmentOrderManagementLang.fare'),
          prop: "fare_value",
          width: 100,
        },
        {
          checked: true,
          label: this.$t('ShipmentOrderManagementLang.order_status'),
          prop: "order_status_value",
          width: 100,
        },
        {
          checked: true,
          label: this.$t('ShipmentOrderManagementLang.creation_time'),
          prop: "creation_time_value",
          width: 100,
        },
        {
          checked: true,
          label: this.$t('ShipmentOrderManagementLang.founder'),
          prop: "founder_value",
          width: 100,
        },
      ],
      tableData: [],

      pageinfo: {
        page: 1,
        page_all: 1,
        limit: 30,
        number_all: 0,
      },
      sendDataArr:[],//多选框勾选集合
    }
  },
  computed: {
      tabsId() {
          return this.$store.state.tabsId;
      }
  },
  mounted(){
    this.getTabsList()
    this.getHeaderList()
    this.getTableData()
    this.getCityList()
  },
  methods:{
    getTabsList(){
      this.$get("selfCompanyGetShippingOrderTransStatus", this.filterData).then((res) => {
        this.tabsList = res.data
      });
    },
    //查询
    search(){
      this.getTableData()
    },
    //清空
    clear(){
      this.getTabsList()
      this.filterData.order_date=[],
      this.filterData.order_date1= "",
      this.filterData.order_date2= "",
      this.filterData.order_sn= "",
      this.getTableData()
    },
    // 获取表头组
    getHeaderList(){
      this.$get("get_th",{menu_id:this.tabsId}).then((res) => {
        if(!!res.data.th_json){
          this.tableColumn=JSON.parse(res.data.th_json)
        }
      });
    },
    //保存表头表头组
    keepHeaderList(){
        let params = new FormData();
        params.append("menu_id", this.tabsId);
        params.append("th_json", JSON.stringify(this.tableColumn));
        this.$postForm("save_th", params).then((res) => {
          
        });
    },
    // 更改分页
    SetPagination(data){
      this.filterData.page=data.page
      this.filterData.limit=data.limit
      this.pageinfo.page=data.page
      this.pageinfo.limit=data.limit
      this.getTableData()
    },
    pushButton(route) {
      // 创建预报单：add
      // 查看订单：look
      // 删除预报单：del
      // 签收入库：sign
      // 生成运单：   Generate
      // 出库：   Outbound
      // 轨迹添加：   TrajectoryAdd
      // 轨迹查询：   TrajectoryQuery
      // 轨迹删除：   TrajectoryDel
      // 到货：   transfer
      // 提货：   takeDelivery
      if (route == "add") {
        this.$refs.add.init();
      } else if (route == "edit") {
        if (JSON.stringify(this.sendDataObj) == "{}" || this.sendDataObj == null) {
         this.$message.warning(this.$t('common.message_warn_text'));
        } else {
          this.$refs.edit.init(this.sendDataObj);
        }
      } else if (route == "look") {
        if (JSON.stringify(this.sendDataObj) == "{}" || this.sendDataObj == null) {
         this.$message.warning(this.$t('common.message_warn_text'));
        } else {
          this.$refs.details.init(this.sendDataObj,this.filterData.trans_status!==0&&this.filterData.trans_status!==2);
        }
      } else if (route == "del") {
        if (JSON.stringify(this.sendDataObj) == "{}" || this.sendDataObj == null) {
          this.$message.warning(this.$t('common.message_warn_text'));
        } else {
          let params = new FormData();
            params.append("order_sn", this.sendDataObj.order_sn);
          this.$postForm("delShippingOrder", params).then((res) => {
            if(res.success){
              this.$message.success(res.msg);
              this.getTableData();
            }
          });
        }
      } else if (route == "sign") {
        if (JSON.stringify(this.sendDataObj) == "{}" || this.sendDataObj == null) {
          this.$message.warning(this.$t('common.message_warn_text'));
        } else {
          this.$refs.SignStorage.init(this.sendDataObj)
        }
      } else if (route == "Generate") {
        if (JSON.stringify(this.sendDataObj) == "{}" || this.sendDataObj == null) {
          this.$message.warning(this.$t('common.message_warn_text'));
        } else {
          this.$refs.Generate.init(this.sendDataObj)
        }
      } else if (route == "TrajectoryQuery") {
        if (JSON.stringify(this.sendDataObj) == "{}" || this.sendDataObj == null) {
          this.$message.warning(this.$t('common.message_warn_text'));
        } else {
          this.$refs.TrajectoryQuery.init(this.sendDataObj)
        }
      } else if (route == "TrajectoryAdd") {
        if (JSON.stringify(this.sendDataObj) == "{}" || this.sendDataObj == null) {
          this.$message.warning(this.$t('common.message_warn_text'));
        } else {
          this.$refs.TrajectoryAdd.init(this.sendDataObj)
        }
      } else if (route == "TrajectoryDel") {
        if (JSON.stringify(this.sendDataObj) == "{}" || this.sendDataObj == null) {
          this.$message.warning(this.$t('common.message_warn_text'));
        } else {
          this.$refs.TrajectoryQuery.init(this.sendDataObj,'删除')
        }
      } else if (route == "transfer") {
        if (JSON.stringify(this.sendDataObj) == "{}" || this.sendDataObj == null) {
          this.$message.warning(this.$t('common.message_warn_text'));
        } else {
          this.$refs.SetStatus.init(this.sendDataObj,'到货')
        }
      } else if (route == "takeDelivery") {
        if (JSON.stringify(this.sendDataObj) == "{}" || this.sendDataObj == null) {
          this.$message.warning(this.$t('common.message_warn_text'));
        } else {
          this.$refs.SetStatus.init(this.sendDataObj,'提货')
        }
      } else if (route == "export") {
        if(this.tableData.length===0){
          this.$message.warning(this.$t('common.noData'));
          return
        }
        this.$downloadCenterLoad('selfCompanyExportShippingOrder',this.filterData);
      }
    },
    // 获取表格数据
    getTableData(){
      this.$get("selfCompanyShippingOrderlist", this.filterData).then((res) => {
        this.tableData = res.data;
        this.pageinfo = res.pageinfo;
        this.pageinfo.limit=Number(this.pageinfo.limit)
        this.sendDataObj={}
        this.$nextTick(()=>{
          let doms=document.getElementsByClassName('isRemarks')
          if(doms.length>0){
            for(var i=0;i<doms.length;i++){
              doms[i].parentElement.style.whiteSpace='unset'
            }
          }
        })
      });
    },
    setCurrent(data){
      this.sendDataObj=data
    },
    cellDblclick(obj){
      let row=obj.row
      this.$refs.details.init(row,this.filterData.trans_status!==0&&this.filterData.trans_status!==2);
    },
    // 左箭头
    leftSlide() {
        // 保存滚动盒子左侧已滚动的距离
        let left = this.$refs.wrapperCon.scrollLeft;
        let num = 0;
        clearInterval(this.timer);
        this.timer = null;
        this.timer = setInterval(() => {
            //   !left:已经滚动到最左侧
            //   一次性滚动距离（可调节）
            if (!left || num >= 300) {
                // 停止滚动
                clearInterval(this.timer);
                this.timer = null;
                return;
            }
            // 给滚动盒子元素赋值向左滚动距离
            this.$refs.wrapperCon.scrollLeft = left -= 30;
            // 保存向左滚动距离（方便判断一次性滚动多少距离）
            num += 30;
        }, 20);
        // 20：速度（可调节）
    },
    // 右箭头
    rightSlide() {
        // 保存滚动盒子左侧已滚动的距离
        let left = this.$refs.wrapperCon.scrollLeft;
        // 保存元素的整体宽度
        let scrollWidth = this.$refs.wrapperCon.scrollWidth;
        // 保存元素的可见宽度
        let clientWidth = this.$refs.wrapperCon.clientWidth;
        let num = 0;
        clearInterval(this.timer);
        this.timer = setInterval(() => {
            // 已经滚动距离+可见宽度
            // left+clientWidth>=scrollWidth：滚动到最右侧
            // num>=300一次性滚动距离
            if (left + clientWidth >= scrollWidth || num >= 300) {
                clearInterval(this.timer);
                return;
            }
            // 给滚动盒子元素赋值向左滚动距离
            this.$refs.wrapperCon.scrollLeft = left += 30;
            // 保存向左滚动距离（方便判断一次性滚动多少距离）
            num += 30;
        }, 20);
        // 20：速度（可调节）
    },
    changeTab(data) {
      this.filterData.page=1
      this.filterData.trans_status=data.id
      this.$refs.pagination.setSpecialBtn(data.id)
      this.getTableData()
    },

    async getCityList() {
      await this.$get("getMyAddress").then((res) => {
          this.OldCityList = res.data.list;
          this.CityList=JSON.parse(JSON.stringify(this.OldCityList)) 
      });
      this.$get("getMemberLocal").then((res) => {
          if(this.OldCityList.length>0){
              this.current_city_id = res.data.lid;
              if(this.OldCityList.filter(el=>{return el.id==this.current_city_id}).length>0){
                  this.current_city_name= this.OldCityList.filter(el=>{return el.id==this.current_city_id})[0].name_current
              }else{
                  this.current_city_id =this.OldCityList[0].id
                  this.current_city_name=this.OldCityList[0].name_current
                  this.selectCity({id:this.current_city_id})
              }
          }else{
              this.current_city_id =''
              this.current_city_name=''
          }
          this.filterData.address_id=this.current_city_id
          this.getTableData()
          this.getOptionsList()
      });
    },
    //选择城市
    selectCity(data) {
      this.current_city_id = data.id;
      this.current_city_name= this.OldCityList.filter(el=>{return el.id==this.current_city_id})[0].name_current
      this.filterData.address_id=this.current_city_id
      this.$refs.popoverRefCity.doClose();
      this.getTableData()
      this.getOptionsList()
      let params = new FormData();
        params.append("lid", data.id);
      this.$postForm("saveMemberLocal", params).then((res) => {});
    },
    filterCityInput(){
        this.CityList=[]
        this.OldCityList.forEach(item => {
            if(item.name_current.includes(this.filterCity)){
            this.CityList.push(item)
            }
        });
    },
    CityHide(){
        this.filterCity=''
        this.CityList=JSON.parse(JSON.stringify(this.OldCityList))
    },
  }
}
</script>
<style lang="less">
.tableBox {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/deep/.vxe-cell{
  padding-top: 5px;
  padding-bottom: 5px;
}
.moreContant{
  display: flex;
  flex-direction: column;
  // .tooltip{
  //   display: inline-block;
  //   width: 100%;
  // }
}

.tabsBox {
  margin-bottom: 20px;
    box-sizing: border-box;
    font-size: 14px;
    color: #444;
    display: flex;
    border: 1px solid #f1f1f1;
    cursor: pointer;
    .scroll_wrapper {
        width: calc(100% - 115px);
        overflow-x: scroll;
        margin: 0 5px;
        .tabslist {
            padding: 0 10px;
            height: 100%;
            display: flex;
            align-items: center;
            gap: 10px;
            .tabsItem {
                height: 28px;
                border: 1px solid #ccc;
                box-sizing: border-box;
                border-radius: 4px;
                padding: 5px;
                display: flex;
                justify-content: center;
                align-items: center;
                white-space: nowrap; //禁止文字换行
                position: relative;
                .close-btn {
                    position: absolute;
                    top: 7px;
                    right: 5px;
                    font-size: 14px;
                }
            }
            .tabs-active {
                color: #fff;
                background-color: #6c9ee5 ;
            }
        }
    }
}

.left-btn,
.right-btn {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
}
.border-left {
    border-left: 1px solid #ccc;
}
.border-right {
    border-right: 1px solid #ccc;
}
/*隐藏滚动条*/
.scroll_wrapper::-webkit-scrollbar {
    display: none;
}
.isRemarks{
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>    